<!DOCTYPE html>
<html lang="en">

<head>
	
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
	<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>数据要素流通平台</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
		name='viewport' />
	<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap-grid.css" rel="stylesheet"> -->
	<link href="./vendor/bootstrap-grid.css" rel="stylesheet">
	<!-- Google Font -->

	<link href="./assets/layui/css/layui.css" rel="stylesheet">
	<!-- Font Awesome Icons -->
	<link rel="stylesheet" href="assets/font/iconfont.css">

	<!-- Main CSS -->
	<link href="./assets/css/main.css" rel="stylesheet" />

	<!-- Animation CSS -->
	<link href="vendor/aos.css" rel="stylesheet" />



	<style>
		.nav-item .active {
			font-weight: 600;
		}

		/* 修改header的样式 */
		.nav-link {
			color: #353c58 !important;
		}

		.navbar-dark .navbar-brand:hover,
		.navbar-dark .navbar-brand:focus {
			color: #0ac382;
		}

		.btn-outline-white:hover {
			background-color: rgba(244, 244, 244, 0.7);
			border-color: #0ac382 !important;
		}

		.navbar-dark .navbar-brand {
			color: #353c58;
		}

		.navbar {
			background-color: rgba(244, 244, 244, 0.5);
		}

		.nav-link.active {
			color: #0ac382 !important;
		}

		.nav-link.active,
		.nav-link.active1 {
			color: #0ac382 !important;
		}

		.page-item.active .page-link {
			z-index: 1;
			color: #fff;
			background-color: #0ac382;
			border-color: #0ac382;
		}

		/* end */


		.fun-Directory {
			display: flex;
			flex-wrap: wrap;
		}

		.fun-Directory li {
			width: 16.6%;
		}

		h3 {
			font-size: 1rem !important;
		}

		.searchHeaderBox {
			position: absolute;
			top: 83px;
			z-index: 1999;
			background-color: white;
			width: 400px;
			left: 856px;
			padding: 10px;
		}

		.searchHeaderBox .label {
			padding: 3px 8px;
			border: 1px solid #d8d8d8;
			margin-right: 12px;
			margin-bottom: 10px;
		}

		::-webkit-input-placeholder {
			/* WebKit browsers */
			color: #999;
			font-size: 14px;
		}

		::-moz-placeholder {
			/* Mozilla Firefox 19+ */
			color: #999;
			font-size: 14px;
		}

		:-ms-input-placeholder {
			/* Internet Explorer 10+ */
			color: #999;
			font-size: 14px;
		}

		.split {
			z-index: 1;
			background: linear-gradient(45deg,#03CA93,#00ff7f38 32%,#ffd32e);
			width: 100%;
			height: 4px;
			margin-top: 50px;
		}

		.infoCard {
			width: 100%;
			/* position: relative; */
			border: 1px solid #ededec;
			border-left: none;
			border-right: none;
			/* transition: box-shadow .3s ease-out; */
			display: flex;
			justify-content: space-between;

		}

		.infoCard:hover {
			box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);

		}

		.infoCard .left-info {
			padding: 30px 10px;
		}

		.infoCard .right-link {
			background-color: #fbfbfb;
			padding: 30px 10px;
		}

		.right-link ul {
			margin-left: 50%;
			transform: translateX(-100px);
			margin-top: 50px;

		}

		.right-link a {
			text-decoration: none;
			color: #fbfbfb;
		}

		.right-link a span {
			display: inline-block;
			width: 200px;
			height: 40px;
			background-color: #03CA93;
			margin-bottom: 20px;
			text-align: center;
			line-height: 40px;
		}

		.row {
			margin-top: 10px;
		}

		.info span {
			font-size: 14px;
			font-weight: normal;
		}

		.info .col div {
			font-weight: 600;
		}

		.RelatedProductMenu .card {
			flex: none;
			width: 22.5% !important;
			margin-left: 1.25% !important;
			margin-right: 1.25% !important;
			margin-bottom: 20px;
			cursor: pointer;
		}

		.card-pricing .card ul li {
			margin-bottom: 0;
		}

		/*星星样式*/
		.atar_Show {
			background: url(./assets/img/stark2.png);
			width: 160px;
			height: 21px;
			position: relative;
			/* float: left; */
			display: inline-block;
		}

		.atar_Show p {
			background: url(./assets/img/stars2.png);
			left: 0;
			height: 21px;
			width: 124px;
		}
	</style>
</head>

<body>

	<!----------------------------------------------------------------------
	NAVBAR (remove topnav if you don't want changed nav background on scroll)
	------------------------------------------------------------------------>
	<nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top">
		<div class="container-fluid">
			<a class="navbar-brand" href="./index.html"><i class="iconfont icon-globe1 mr-2"
					style="font-size: 20px;"></i><strong>数据流通云</strong>
			</a>
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02"
				aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="navbar-collapse collapse" id="navbarColor02">
				<ul class="navbar-nav mr-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link" href="./index.html">首页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./dataResources.html">数据资源</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link" href="productStore.html">数据产品 </a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./serviceStore.html">服务产品</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./customShop.html">定制数据</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./developer.html">开发者</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./newMessage.html">最新消息</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./accessData.html">数据访问</a>
					</li>
					<li class="nav-item highSerachBtn">
						<div class="col pt-4 pb-4">
							<a class="btn btn-lg btn-outline-white btn-round searchKeyword text-white"
								style="color: #353c58 !important;border-color: #353c58;"><span class="iconbox border-0"
									style="margin-right: 5px;"><i class="iconfont icon-search"
										style="font-size: 20px;"></i></span>搜索</a>
						</div>
					</li>
				</ul>
				<ul class="navbar-nav ml-auto d-flex align-items-center">
					<li class="nav-item">
						<a class="nav-link myBtn" href="javascript:;">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="iconfont icon-cart-arrow-down"></i></span>产品袋
						</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="./mySpace.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="iconfont icon-bxs-book-reader"></i></span>我的空间 </a>
					</li>
					<li class="nav-item disabledNone" id="userInfo">
						<ul class="layui-nav" style="background-color: rgba(244, 244, 244, 0);padding: 0;">
							<li class="layui-nav-item">
								<a href="javascript:;" style="color: #353c58 !important;">
									<span class="iconbox border-0" style="margin-right: 5px;"><i
											class="iconfont icon-user-fill"></i></span>
									用户：<span id="accunt">登录过期</span>
								</a>
								<dl class="layui-nav-child">
									<dd><a href="./changePassword.html">修改密码</a></dd>
									<dd><a href="" id="logOutBtn">退出登录</a></dd>
								</dl>
							</li>
						</ul>
					</li>
					<li class="nav-item disabledNone" id="attestation">
						<a class="nav-link" style="color:#FF820C;padding-left: 0px;font-size:12px;cursor: pointer;">未认证</a>
					</li>
					<li class="nav-item disabledNone noUser">
						<a class="nav-link" href="./login.html">
							<span class="iconbox border-0" style="margin-right: 5px;"><i
									class="iconfont icon-user-fill"></i></span>登录 </a>
					</li>
					<li class="nav-item disabledNone noUser">
						<span class="nav-link" href="./register.html">
							<a class="btn btn-success btn-round shadow-sm text-white" href="#" data-toggle="modal"
								data-target="#modal_newsletter">
								<i class="iconfont icon-github"></i> 立即注册 <a href="#" class="downloadzip"
									class="hidden"></a>
							</a>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- End Navbar -->
	<!-- 顶部搜索框 -->

	<!------------------------------------- HEADER --------------------------------------->
	<header>
		<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative"
			style="background-color: #03CA93 !important;">
			<div class="container-fluid text-white h-100">
				<div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
					<div class="col pt-4 pb-4">
						<h1 class="display-3"><strong id="dataTitle">数字资源详情</strong></h1>
						<h4 class="font-weight-light mb-4"><strong> 数据流通云</strong> <strong></strong></h4>
						<!-- <a href="#" class="btn btn-lg btn-outline-white btn-round">了解更多</a> -->
					</div>
					<div
						class="col align-self-bottom align-items-right text-right h-max-380 h-xl-560 position-relative z-index-1">
						<img src="assets/img/demo/ali/shuzi.gif" class="rounded img-fluid">
					</div>
				</div>
			</div>

	</header>
	<!--- END HEADER -->

	<!--------------------------------------
CAROUSEL 轮播
--------------------------------------->
	<!-- <section class="pt-4 pb-5" data-aos="fade-up" id="example-carousel" style="padding-top: 0px !important;">
	<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
		</ol>
		<div class="carousel-inner shadow-sm rounded">
			<div class="carousel-item active" style="height: 400px;">
				<img class="d-block w-100" src="assets/img/demo/38b3cfa9ab2b5abc8036ad112acbb737.jpeg" alt="First slide">
			</div>
			<div class="carousel-item" style="height: 400px;">
				<img class="d-block w-100" src="assets/img/demo/83a77d444953b505e8d51a5eb1392543.jpeg" alt="Second slide">
			</div>
		</div>
	</div>
</section> -->
	<main class="container">
		<!-------------------------------------- TABLE --------------------------------------->
		<!-- <section class="pt-4 pb-5 mb-5" data-aos="fade-up">
			<h3 class="h5 mb-4 font-weight-bold">数据列表信息</h3>
			<table class="table" id="dataTable">
				<thead class="thead-dark">

				</thead>
				<tbody>

				</tbody>
			</table>
			<nav aria-label="Page navigation example" style="float: right;">
				<ul class="pagination">
					<li class="page-item active"><a class="page-link">1</a></li>
					<li class="page-item"><a class="page-link">2</a></li>
					<li class="page-item"><a class="page-link">3</a></li>
					<li class="page-item"><a class="page-link">4</a></li>
					<li class="page-item"><a class="page-link">5</a></li>
					<li class="page-item"><a class="page-link">6</a></li>
				</ul>
			</nav>
		</section>
		</section> -->
		<section class="pt-4 pb-5 " data-aos="fade-up">
			<h3 class="h5 mb-4 font-weight-bold" class="text-center">数据资源详情</h3>
			<div class="split"></div>
			<div class="infoCard">
				<div class="col-8 left-info">
					<div class="row">
						<label style="margin-bottom: 10px;font-weight: 600;">详细介绍</label>
						<div>
							<p style="font-size: 14px;text-indent: 2em;" id="detail">
								通过提供具有通用性的数据共享业务解决方案，让各个数据共享业务实现、业务应用变得简单，各个业务功能在里实现其业务处理模型，机制相同的业务仅仅需要做一定的配置，就可以形成某个部门的新处理业务应用，而不需要投入重金开发全业务系统。特别是在本项目中，结合全域数据管理系统、智能中台、业务中台等功能件，极大地扩充了的应用范围，可以提供更加广泛的、多种类业务应用。
							</p>
						</div>
						<hr>
					</div>
					<div class="row">
						<label style="margin-bottom: 10px;font-weight: 600;">例子</label>
						<div>
							<p style="font-size: 14px;text-indent: 2em;" id="example">
								通过提供具有通用性的数据共享业务解决方案，让各个数据共享业务实现、业务应用变得简单，各个业务功能在里实现其业务处理模型，机制相同的业务仅仅需要做一定的配置，就可以形成某个部门的新处理业务应用，而不需要投入重金开发全业务系统。特别是在本项目中，结合全域数据管理系统、智能中台、业务中台等功能件，极大地扩充了的应用范围，可以提供更加广泛的、多种类业务应用。
							</p>
						</div>
						<hr>
					</div>
					<div class="info">
						<div class="row">
							<div class="col">
								<div id="contentName">数据资源名称：<span>—</span></div>
							</div>
							<div class="col">
								<div id="contentNickName">别名：<span>—</span></div>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<div id="createBy">所属用户：<span>—</span></div>
							</div>
							<div class="col">
								<div id="departInfo">所属部门：<span>—</span></div>
							</div>

						</div>
						<div class="row">

							<div class="col">
								<div id="sharedType">共享类型：<span>—</span></div>
							</div>
							<div class="col">
								<div id="firstType">类型：<span>—</span></div>
							</div>
						</div>
						<div class="row">
							<div class="col">
								<div id="createTime">上架时间：<span>—</span></div>
							</div>
							<div class="col">
								<div id="status">当前状况：<span>—</span></div>
							</div>
<!--							<div class="col">-->
<!--								<div id="viewNumber">访问量：<span>0</span></div>-->
<!--							</div>-->

						</div>
						<div class="row">
							<div class="col">
								<div id="score">评分：<span>0</span></div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-4 right-link">
					<ul>
						<li>
							<a href="javascript:;">
								<span class="RelatedProducts">查看关联产品</span>
							</a>
						</li>
<!--						<li>-->
<!--							<a href="javascript:;">-->
<!--								<span class="productRegistration">自定义数据产品</span>-->
<!--							</a>-->
<!--						</li>-->
						<li>
							<a href="javascript:;">
								<span class="applyMadeDIY">请卖家定制产品</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</section>
		<!-- 关联产品 -->
		<section class="pt-4 pb-5" data-aos="'fade-up">
			<h3 class="h5 mb-4 font-weight-bold">关联产品</h3>
			<div class="card-deck card-pricing RelatedProductMenu">
			</div>
		</section>
	</main>

	<!-------------------------------------- FOOTER 底部 --------------------------------------->

	<footer class="bg-black pb-5" style="padding-top: 20px;padding-bottom: 20px !important;background-color: #03CA93;">
		<div class="container">
			<div class="row" style="text-align: center;">
				<div class="col-12 col-md mr-4">
					<small class="d-block mt-3 text-muted" style="color: white !important;">
						<p style="color: white;margin-top: 10px;font-size: 30px;">数据要素流通平台</p>
						Copyright @ 2022 数据要素流通平台-版权所有 蜀ICP备202223603号
					</small>
				</div>
			</div>
		</div>
	</footer>



	<!-------------------------------------- JAVASCRIPTS --------------------------------------->
	<script src="vendor/jquery.min.js" type="text/javascript"></script>
	<script src="vendor/popper.min.js" type="text/javascript"></script>
	<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="vendor/share.js" type="text/javascript"></script>
	<script src="js/functions.js" type="text/javascript"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.bundle.js"></script> -->
	<script src="./vendor/bootstrap.bundle.js"></script>
	<script src="./assets/layui/layui.js" type="text/javascript"></script>
	<script src="js/tool.js" type="text/javascript"></script>
	<script src="js/header.js" type="text/javascript"></script>
	<script src="assets/font/iconfont.js" type="text/javascript"></script>
	<!-- tab事件-->
	<script>
		$(function () {
			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				// 获取已激活的标签页的名称
				var activeTab = $(e.target).text();
				// 获取前一个激活的标签页的名称
				var previousTab = $(e.relatedTarget).text();
				$(".active-tab span").html(activeTab);
				$(".previous-tab span").html(previousTab);
			});
		});
	</script>
	<!-- Animation -->
	<script src="vendor/aos.js" type="text/javascript"></script>
	<noscript>
		<style>
			*[data-aos] {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
			}
		</style>
	</noscript>
	<script>
		AOS.init({
			duration: 700
		});
	</script>

	<!-- Disable animation on less than 1200px, change value if you like -->
	<script>
		AOS.init({
			disable: function () {
				var maxWidth = 1200;
				return window.innerWidth < maxWidth;
			}
		});
	</script>

	<!-- Carousel Height Smooth -->
	<!-- <script>
    $('.carousel').on('slide.bs.carousel', function (event) {
      var height = $(event.relatedTarget).height();
      var $innerCarousel = $(event.target).find('.carousel-inner');
      $innerCarousel.animate({
        height: height
      });
    });
    </script> -->

	<!-- Popovers -->
	<script>
		$(function () {
			$('[data-toggle="popover"]').popover()
		})
		$('.popover-dismiss').popover({
			trigger: 'focus'
		})
	</script>

	<!-- Tooltips -->
	<script>
		$(function () {
			$('[data-toggle="tooltip"]').tooltip()
		})
	</script>
	<script src="./js/dataStoreDetail.js"></script>

</body>

</html>
